<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="lb" uri="http://www.itlaobing.cn/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="ctx" value="${request.getContextPath }" />

<title>列表</title>
<js>
<script>
	$(function() {
	toastr.options = {
			closeButton : false, // 是否显示关闭按钮（提示框右上角关闭按钮）；
			debug : false, // 是否为调试；
			progressBar : true, // 是否显示进度条（设置关闭的超时时间进度条）；
			positionClass : "toast-top-right", // 消息框在页面显示的位置
			/**
			 * toast-top-left 顶端左边 toast-top-right 顶端右边 toast-top-center 顶端中间
			 * toast-top-full-width 顶端，宽度铺满整个屏幕 toast-botton-right
			 * toast-bottom-left toast-bottom-center toast-bottom-full-width
			 */
			onclick : null, // 点击消息框自定义事件
			showDuration : "300", // 显示动作时间
			hideDuration : "1000", // 隐藏动作时间
			timeOut : "2000", // 自动关闭超时时间
			extendedTimeOut : "1000",
			showEasing : "swing",
			hideEasing : "linear",
			showMethod : "fadeIn", // 显示的方式，和jquery相同
			hideMethod : "fadeOut" // 隐藏的方式，和jquery相同
		};
		<c:if test="${not empty toastMsg}">
			toastr.success('${toastMsg}');
		</c:if>
		$(document).on("click",".btn-delete",function(event){

			//阻止事件冒泡
			event.stopPropagation();
			//阻止默认的事件
			event.preventDefault();
			 if(!confirm("确定要删除数据吗？"))
			 {
			 	return false;
			 }
			//取出要提交的地址
			var href = $(this).prop("href");
			$.ajax({
				type : "POST",
				url : href,
				data : {_method:"DELETE"}
			}).done(function(data){
				if(data){
					$("#row"+data.id).remove();//移除表格的行
					toastr["success"]("删除"+data.name+"成功！");
				}
				
			});
		});
		})
</script>
</js>
<a href="${ctx }/areas/create" class="btn btn-primary btn-lg"><i class="glyphicon glyphicon-plus"></i>新建</a>
<form class="form-inline" action="${ctx }/areas" method="get">
	<div class="form-group">
		<input class="form-control" type="text" name="areaName" placeholder="" value="${param.areaName}" /> 
	</div>
	<button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-search"></i>查询</button>
</form>
<table class="table table-bordered table-hover">
	<tr>
		<th>序号</th>
		<th>区域名称</th>
		<th>区域简拼码</th>
		<th>区域备注</th>
		<th>操作</th>
	</tr>
	<c:forEach var="area" items="${areas}" varStatus="st">
		<tr id="row${area.id}">
			<td>${st.count}</td>
			<td>${area.areaName}</td>
			<td>${area.areaPinyinShort}</td>
			<td>${area.remarks}</td>
			<td>
			<div class="btn-group" role="group" >
				<a href="${ctx}/areas/${area.id}" class="btn btn-info " ><i class="glyphicon glyphicon-eye-open"></i></a> 
				<a href="${ctx}/areas/${area.id}/update" class="btn btn-primary " ><i class="glyphicon glyphicon-edit"></i></a> 
				<a href="${ctx}/areas/${area.id}"	 class="btn btn-danger btn-delete" ><i class="glyphicon glyphicon-trash"></i></a>
			</div>
			</td>
		</tr>
	</c:forEach>
</table>
<lb:pagination pager="${areas}"/> 

